<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>样式类名的操作</title>
		<!-- 样式类名操作：针对css3、添加、移除1、切换的元素“类名”操作
		 addClass()     有参:一个参和多个参
		                 语法：addClass("类名")
						 <p class=”类名“>
		 removeClass()
		 toggleClass()
		 hasClass()
		 -->
		 <!--要求：1.jq引入
		           2.html    div  id="targetElement"
				              4个按钮   id="addClassBtn"
							            id="id="removeClassBtn"
										id="toggleClassBtn"
										id="hasClassBtn"
				             div  id="resultArea"
		            3.css:  .bgColor{ 300*300  background:black}
					            border:2px solid red
								radium
		  -->
		  <script src="../js/jquery-1.11.1.js"></script>
		  <style>
			 .bgColor{
			 				width: 300px;
			 				height: 300px;
			 				background: red;
			 			}
						.bgColor1{
										width: 100px;
										height: 100px;
										background:black;
									}
			 			.broders{
			 				border: 10px solid #ff0;
			 				border-radius: 50%;
			 			}
		  </style>
	</head>
	<body>
		<div id="targetElement"></div>
		<button id="addClassBtn">添加类名</button>
		<button id="removeClassBtn">移除类名</button>
		<button id="toggleClassBtn">切换类名</button>
		<button id="hasClassBtn">检查类名是否存在</button>
		<div id="resultArea"></div>
		<script>
			//1. 点击 添加类名 添加效果【样式】300*300 背景色red
			$("#addClassBtn").click(function(){
				$("#targetElement").addClass("bgColor broders");
				$("#resultArea").html("添加了个样式，类名为：bgColor和broders");
			});
			//2.去除样式类
			$("#removeClassBtn").click(function(){
				$("#targetElement").removeClass("broders");
				$("#resultArea").html("去掉了个样式，类名为broders");
			});
			//3.切换样式类名
			$("#toggleClassBtn").click(function(){
				$("#targetElement").toggleClass("bgColor1");
				$("#resultArea").html("换了个了个样式，类名为bgColor1");
			});
			//4.检查样式类名是否存在
			$("#hasClassBtn").click(function(){
				var u=$("#targetElement").hasClass("bgColor");
				$("#resultArea").html("bgColor是否存在："+u);
			});
		</script>
	</body>
</html>